<template>
  <n-tabs v-model:value="tabValue" justify-content="start" type="line">
      <n-tab-pane name="list" tab="文章列表">
      <div v-for="blog in blogListInfo" style="margin-bottom:15px">
        <n-card :title="blog.title">
          {{ blog.content }}

          <template #footer>
            <n-space align="center">
              <div>发布时间：{{ blog.create_time }}</div>
              
              <n-button color="#42aeff" @click="toUpdate(blog)">修改</n-button>
              <n-button color="#ff5722" @click="toDelete(blog)">删除</n-button>
            </n-space>
          </template>
        </n-card>
      </div>
      <n-pagination @click="toPage(pageInfo.page)" v-model:page="pageInfo.page" :page-count="pageInfo.pageCount" />
      </n-tab-pane>

    
    
     <n-tab-pane name="add" tab="添加文章">
      <n-form>
        <n-form-item label="标题">
          <n-input v-model:value="addArticle.title" placeholder="请输入标题" />
        </n-form-item>
        <n-form-item label="分类">
          <n-select v-model:value="addArticle.category_id" :options="categortyOptions" />
        </n-form-item>
        <n-form-item label="内容">
          <rich-text-editor v-model="addArticle.content"></rich-text-editor>
        </n-form-item>
        <n-form-item label="">
          <n-button @click="add">提交</n-button>
        </n-form-item>
      </n-form>
      </n-tab-pane>

      <!-- 这里禁用tab页，防止直接点击晋入修改，所有修改均通过文章的链接进入 -->
      <n-tab-pane name="update" tab="修改文章" :disabled="true">
      <n-form>
        <n-form-item label="标题">
          <n-input v-model:value="updateArticle.title" placeholder="请输入标题" />
        </n-form-item>
        <n-form-item label="分类">
          <n-select v-model:value="updateArticle.category_id" :options="categortyOptions" />
        </n-form-item>
        <n-form-item label="内容">
            <rich-text-editor v-model="updateArticle.content"></rich-text-editor>
        </n-form-item>
        <n-form-item label="">
          <n-button @click="update">提交</n-button>
        </n-form-item>
      </n-form>
    </n-tab-pane>
  </n-tabs> 
</template>

<script setup>
import { AdminStore } from '../../stores/AdminStore'
import { ref, reactive, inject, onMounted, getCurrentInstance, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import RichTextEditor from '../../components/RichTextEditor.vue'

const { proxy } = getCurrentInstance()
const router = useRouter()


const message = inject("message")

const adminStore = AdminStore()

//文章添加数据
const addArticle = reactive({
  category_id: 0,
  title: "",
  content: "",
})

//文章修改数据
const updateArticle = reactive({
  id: 0,
  category_id: 0,
  title: "",
  content: "",
})

//分类选项
const categortyOptions = ref([])
const blogListInfo = ref([])
//标签页
const tabValue = ref("list")

//分页数据
const pageInfo = reactive({
  page: 1,
  pageSize: 3,
  pageCount: 0,
  count: 0,
})

onMounted(() => {
  loadBlogs()
  loadCategorys()
  // console.log(tabValue.value)
})



//读取博客列表
const loadBlogs = async () => {
  let res = await proxy.$axios.post(`/blogs/search?page=${pageInfo.page}&pageSize=${pageInfo.pageSize}`)
  // console.log(res)
  let temp_rows = res.data.data.rows;
  for (let row of temp_rows) {
    row.content += "..."
    let d = new Date(row.create_time)
    row.create_time = `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`
  }
  blogListInfo.value = temp_rows;
  pageInfo.count = res.data.data.count;
  pageInfo.pageCount = parseInt(pageInfo.count / pageInfo.pageSize) + (pageInfo.count % pageInfo.pageSize > 0 ? 1 : 0)
}

//读取分类
const loadCategorys = async () => {
  let res = await proxy.$axios.get("/category/list")
  categortyOptions.value = res.data.rows.map((item) => {
    return {
      label: item.name,
      value: item.id
    }
  })
  // console.log(categortyOptions.value)
}

const add = async () => {
  let res = await proxy.$axios.post("/blogs/_token/add", addArticle)
  if (res.data.code === 200) {
    message.info(res.data.msg)
    addArticle.title = ""
    addArticle.category_id = 0
    addArticle.content = ""

    tabValue.value = "list"
    loadBlogs()
  } else {
    message.error(res.data.msg)
  }
}

const toPage = async (page) => {
  pageInfo.page = page;
  // console.log(pageInfo.page);
  loadBlogs()

}

const toUpdate = async (blog) => {
  
  tabValue.value = "update"
  console.log(tabValue.value)
  let res = await proxy.$axios.get("/blogs/detail?id=" + blog.id)
  updateArticle.id = blog.id
  updateArticle.title = res.data.rows[0].title
  updateArticle.content = res.data.rows[0].content
  updateArticle.category_id = res.data.rows[0].category_id
}

const update = async () => {
  let res = await proxy.$axios.put("/blogs/_token/update", updateArticle)
  if (res.data.code === 200) {
    message.info(res.data.msg)
    loadBlogs()
    tabValue.value = "list"
  } else {
    message.error(res.data.msg)
  }
}

const toDelete = async (blog) => {
  let res = await proxy.$axios.delete("/blogs/_token/delete?id=" + blog.id)
  if (res.data.code === 200) {
    message.info(res.data.msg)
    loadBlogs()
  } else {
    message.error(res.data.msg)
  }
}


</script>

<style lang="scss" scoped>
</style>